<template>
    <div class="editMerchantBox" v-loading="loading">
        <el-form ref="form">
            <!-- :model="form" -->
            <el-form-item label="商户类型">
                <el-select
                        @change="getClassifyFn"
                        v-model="initial_data.store_type_id"
                        style="width:300px"
                        placeholder="请选择商户类型"
                >
                    <el-option v-for="(item) in typeList" :key="item.id" :label="item.name"
                               :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商户分类">
                <TreeSelect
                        style="width: 300px; float: left"
                        :normalizer="normalizer"
                        v-model="initial_data.classifity_id"
                        :options="classifyList" />
            </el-form-item>

            <el-form-item label="商户标签">
                <el-select @change="getTagsName" multiple style="width:300px" v-model="initial_data.tag" placeholder="请选择">
                    <el-option
                            v-for="item in tagList"
                            :key="item.id"
                            :label="item.tag_name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="人气值">
                <el-input v-model="initial_data.user_volume" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="商户名称">
                <el-input v-model="initial_data.name" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="联系电话">
                <el-input v-model="initial_data.contact" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="电话号码">
                <el-input v-model="initial_data.mobile" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="商户地址">
                <el-input v-model="initial_data.address" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="人均消费" v-if="visible">
                <el-input v-model="initial_data.per_capita" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="是否支持外卖" v-if="visible">
                <el-radio-group v-model="initial_data.take_out">
                    <el-radio :label="1" value="1">是</el-radio>
                    <el-radio :label="0" value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="配送费" v-if="visible">
                <el-input v-model="initial_data.delivery_fee" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="起送价格" v-if="visible">
                <el-input v-model="initial_data.init_delivery_price" style="width:300px"></el-input>
            </el-form-item>

            <el-form-item label="是否需要排队" v-if="visible">
                <el-radio-group v-model="initial_data.is_lineup">
                    <el-radio :label="1" value="1">是</el-radio>
                    <el-radio :label="0" value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否支持预定" v-if="visible">
                <el-radio-group v-model="initial_data.is_book">
                    <el-radio :label="1" value="1">是</el-radio>
                    <el-radio :label="0" value="0">否</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="商户介绍">
                <el-input type="textarea" v-model="initial_data.introduce" style="width:500px"></el-input>
            </el-form-item>

            <el-form-item label="营业时间" class="timeBox">
                <el-form-item label="上午">
                    <el-time-select
                            placeholder="起始时间"
                            v-model="time_am_start"
                            :picker-options="{
						  start: '00:00',
						  step: '00:30',
						  end: '24:00'
						}">
                    </el-time-select>
                    —
                    <el-time-select
                            placeholder="结束时间"
                            v-model="time_am_end"
                            :picker-options="{
						  start: '00:00',
						  step: '00:30',
						  end: '24:00'
						}">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="下午">
                    <el-time-select
                            placeholder="起始时间"
                            v-model="time_pm_start"
                            :picker-options="{
						  start: '00:00',
						  step: '00:30',
						  end: '24:00'
						}">
                    </el-time-select>
                    —
                    <el-time-select
                            placeholder="结束时间"
                            v-model="time_pm_end"
                            :picker-options="{
						  start: '00:00',
						  step: '00:30',
						  end: '24:00'
						}">
                    </el-time-select>
                </el-form-item>
            </el-form-item>
        </el-form>

        <div class="picUpload" style="display:flex;flex-direction:row">

            <div>
                <div>
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action=""
                            name="business_license"
                            list-type="picture-card"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="businessLicenseVisible"
                            :fullscreen="true">
                        <img alt="" class="" :src="initial_data.business_license" v-show="businessLicenseVisible">
                        <span class="hoverBox" @click="businessLicenseVisible=false" v-show="businessLicenseVisible">
							<span class="deleteIcon">
								<i class="el-icon-delete"></i>
							</span>
						</span>
                    </el-dialog>
                </div>
                <span class="title">营业许可证</span>
            </div>


            <div v-if="visible">
                <div>
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action=""
                            name="food_license"
                            list-type="picture-card"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="foodSafetyVisible"
                            :fullscreen="true">
                        <img alt="" class="" :src="initial_data.food_license" v-show="foodSafetyVisible">
                        <span class="hoverBox" @click="foodSafetyVisible=false" v-show="foodSafetyVisible">
							<span class="deleteIcon">
								<i class="el-icon-delete"></i>
							</span>
						</span>

                    </el-dialog>
                </div>
                <span class="title">食品安全许可证</span>
            </div>


            <div>
                <div>
                    <el-upload
                            :http-request="handlePictureCardPreview"
                            :multiple="false"
                            action=""
                            list-type="picture-card"
                            name="logo"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog
                            :modal="false"
                            :center="true"
                            :show-close="false"
                            class="commonVisible"
                            :visible.sync="logoVisible"
                            :fullscreen="true">
                        <img alt="" class="" :src="initial_data.logo" v-show="logoVisible">
                        <span class="hoverBox" @click="logoVisible=false" v-show="logoVisible">
							<span class="deleteIcon">
								<i class="el-icon-delete"></i>
							</span>
						</span>

                    </el-dialog>
                </div>
                <span class="title">商户logo</span>
            </div>

        </div>

        <!-- map -->
        <div class="mapBox">
            <span class="title">导航经纬度获取</span>
            <div class="latlng">
                <el-select
                        @change="currentSel"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入地址关键词"
                        :remote-method="remoteMethod">
                    <el-option
                            v-for="(item) in addrOptions"
                            :key="item.id"
                            :label="item.title"
                            :value="item"
                            :addrOptionstatus="false">
                    </el-option>
                </el-select>
                <span class="local">经度:{{initial_data.lat}}</span>
                <span class="local">纬度:{{initial_data.long}}</span>
            </div>
        </div>

        <div class="submitBtnBox">
            <el-button class="submitBtn" @click="submitFn" type="primary">确认修改</el-button>
        </div>

    </div>

</template>

<script>
    import TreeSelect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    export default {
        name: 'edit-merchant',
        components: {TreeSelect},
        data() {
            return {
                tagData: [],
                tagList: [],
                initial_data: {},//获取初始数据
                time_am_start: '',
                time_am_end: '',
                time_pm_start: '',
                time_pm_end: '',
                businessLicenseVisible: true,
                foodSafetyVisible: true,
                logoVisible: true,
                loading: false,
                classifyList: [],
                typeList: [],
                addrOptions: [],
                take_out: 1,
                defaultProps: {
                    value: 'id',          // 唯一标识
                    label: 'name',       // 标签显示
                    children: 'children', // 子级
                },
                visible: true
            }
        },
        created() {

        },
        computed: {
            submitObj() {
                return {
                    init_delivery_price: this.initial_data.init_delivery_price,
                    store_type_id: this.initial_data.store_type_id,
                    user_volume: this.initial_data.user_volume,  //人气值
                    is_lineup: this.initial_data.is_lineup, //是否需要排队
                    is_book: this.initial_data.is_book, //是否支持预定
                    delivery_fee: this.initial_data.delivery_fee, //配送费
                    mobile: this.initial_data.mobile,  //手机
                    contact: this.initial_data.contact, //联系电话
                    id: this.$route.query.id,
                    token: localStorage.getItem('user_token'),//token
                    name: this.initial_data.name,//商户名称
                    classifity_id: this.initial_data.classifity_id,//商户分类
                    store_id: this.initial_data.company_id,//商户id
                    address: this.initial_data.address,//商户地址
                    long: this.initial_data.long,//经度
                    lat: this.initial_data.lat,//纬度
                    logo: this.initial_data.logo,//商户logo
                    business_license: this.initial_data.business_license,//营业许可证
                    food_license: this.initial_data.food_license,//食品安全许可证
                    am: this.time_am_start + '-' + this.time_am_end,//早上营业时间
                    pm: this.time_pm_start + '-' + this.time_pm_end,//下午营业时间
                    introduce: this.initial_data.introduce,//商户介绍
                    per_capita: this.initial_data.per_capita,//人均消费
                    take_out: this.initial_data.take_out,//是否支持外卖
                    tag: this.tagData
                }
            }
        },
        watch: {},
        methods: {
            //初始数据
            defaultFn() {
                this.loading = true;
                this.$http.get('/web/store/info', {
                    params: {
                        'token': localStorage.getItem('user_token'),
                        'id': this.$route.query.id
                    }
                }).then((response) => {
                    if (response.data.status === 'success') {


                        this.initial_data = response.data.data;

                        this.time_am_start = this.initial_data.am.split('-')[0];
                        this.time_am_end = this.initial_data.am.split('-')[1];
                        this.time_pm_start = this.initial_data.pm.split('-')[0];
                        this.time_pm_end = this.initial_data.pm.split('-')[1];

                        for (var i = 0; i < this.tagList.length; i++){
                            for (var l = 0; l < this.initial_data.tag.length; l++) {
                                if (this.tagList[i].id === this.initial_data.tag[l]){
                                    this.tagData.push({
                                        id: this.initial_data.tag[l],
                                        tag_name: this.tagList[i].tag_name
                                    })
                                }
                            }
                        }

                        this.getClassifyFn(this.initial_data.store_type_id)
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                })
            },
            //获取店铺分类内容
            getClassifyFn(classifity_id) {
                if (classifity_id === 2){
                    this.visible = false;
                }else {
                    this.visible = true;
                }
                this.loading = true;
                var obj = {
                    token: localStorage.getItem('user_token'),
                    type_id: classifity_id
                }
                this.$http.post('/web/store/classify/list',obj).then((response) => {
                    if (response.data.status === 'success') {
                        this.classifyList = response.data.data;
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                    console.log('error:', error)
                })
            },
            //获取店铺类型
            getType() {
                this.$http.get('/web/store/type/list', {
                    params: {token: localStorage.getItem('user_token')}
                }).then((response) => {
                    if (response.data.status === 'success') {
                        this.typeList = response.data.data;
                    }
                })
            },
            //修改树选择数据默认格式
            normalizer(node) {
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children,
                }
            },
            //获取当前选中的内容 拿到经度和纬度
            currentSel(selVal) {
                this.initial_data.lat = selVal.location.lat;
                this.initial_data.long = selVal.location.lng;
            },
            //上传图片:folder是传给服务的文件名,用作图片分类
            handlePictureCardPreview(file) {
                let imageFile = file.file;
                let formData = new FormData();
                formData.append("image", imageFile);
                formData.append("action", file.filename);
                this.loading = true;
                this.$http.post('/api/tool/ali/upload/image', formData).then((response) => {
                    if (file.filename === 'business_license') {
                        this.submitObj.business_license = response.data.data;
                    }
                    if (file.filename === 'food_license') {
                        this.submitObj.food_license = response.data.data;
                    }
                    if (file.filename === 'logo') {
                        this.submitObj.logo = response.data.data;
                    }
                    this.loading = false;
                }).catch((error) => {
                    console.log('图片上传失败');
                })
            },


            // 腾讯map
            mapSearch(addr) {
                const KEY = 'PTDBZ-V7U6Q-MFW5K-GCOGI-H46BH-AFFS3'; //key 秘钥自己申请
                let url = 'https://apis.map.qq.com/ws/place/v1/suggestion?region=&keyword=' + encodeURI(addr);
                // let locationdata = lat+','+lng //纬度，经度
                this.$jsonp(url, {
                    key: KEY,
                    output: 'jsonp',
                    get_subpois: 1,
                    policy: 1,
                    // address_format:true
                })
                    .then(json => {
                        this.addrOptions = json.data;
                        if (this.addrOptions && this.addrOptions.length > 0) {
                            this.addrOptionstatus = true;
                        }
                    })
                    .catch(err => {

                    })
            },
            //输入地址
            remoteMethod(query) {
                this.mapSearch(query);
            },

            //获取标签列表
            getTagsList(){
                this.loading = true;
                this.$http.get('/web/store/tags/list', {
                    params: {
                        token: localStorage.getItem('user_token'),
                        pageSize: 999,
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.tagList = response.data.data.list
                    }
                    this.loading = false
                }).catch(() => {
                    this.loading = false;
                })
            },

            //提交内容
            submitFn() {
                console.log(this.submitObj)
                this.loading = true;
                this.$http.post('/web/store/update', this.submitObj).then((response) => {
                    if (response.data.status === 'success') {
                        this.$message({
                            message: '修改成功',
                            duration: 6000
                        });
                        this.loading = false;
                        this.defaultFn()
                    } else {
                        this.$message({
                            message: '添加失败，原因：' + response.data.failedMsg,
                            duration: 6000
                        });
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.$message({
                        message: '添加失败，原因：' + error,
                        duration: 6000
                    });
                    this.loading = false;
                })
            },
            getTagsName(value){
                this.tagData = [];
                for (var l = 0; l < value.length; l++){
                    for (var i = 0; i < this.tagList.length; i++){
                        if (value[l] === this.tagList[i].id){
                            this.tagData.push({id: value[l], tag_name: this.tagList[i].tag_name});
                        }
                    }
                }
            }
        },
        mounted() {
            this.defaultFn();
            this.getTagsList();
            this.getType();
            // this.$refs.businessLicenseUpload.submit()
        }
    }
</script>

<style scoped lang="scss">
    @import './merchant-manage.scss';

</style>
